<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>AI 对话框</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="./static/css/bootstrap.min.css" rel="stylesheet">
    <script src="./static/js/popper.min.js"></script>
    <script src="./static/js/bootstrap.bundle.min.js"></script>
    <script src="./static/js/ofa.min.js"></script>
    <style>
        body {
            background-color: #f8f9fa;
            padding-top: 50px;
        }

        .chat-container {
            border: 1px solid #ccc;
            border-radius: 8px;
            background-color: white;
            display: flex;
            flex-direction: column;
            height: 80vh;
        }

        .chat-messages {
            padding: 20px;
            overflow-y: auto;
            max-height: 60vh; /* 可根据需要调整最大高度 */
            flex-grow: 1;
            margin-bottom: 0;
            /* 添加以下样式优化 */
            border-radius: 4px;
            background-color: #f5f5f5;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
        }
        .chat-input {
            border-top: 1px solid #ccc;
            padding: 10px;
            flex-shrink: 0;
            margin-top: 0;
            height: 20vh;
        }
        .chat-input .row {
            height: 100%;
        }
        .message {
            margin-bottom: 15px;
            display: flex;
        }
        .user-message {
            justify-content: flex-end;
        }
        .ai-message {
            justify-content: flex-start;
        }
        .bubble {
            max-width: 70%;
            padding: 10px;
            border-radius: 15px;
        }
        .user-bubble {
            background-color: #0d6efd;
            color: white;
        }
        .ai-bubble {
            background-color: #8de098;
            color: #ffffff;
        }
        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin: 0 10px;
        }
        .user-message .avatar {
            order: 2;
        }
        .ai-message .avatar {
            order: 0;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-8 chat-container shadow-sm">
            <!-- 聊天框内容 -->
            <div class="chat-messages" id="chatMessages">

            </div>
            <div class="chat-input list-group">
                <div class="row">
                    <div class="col-12">
                        <!-- 第一行内容 -->
                        <div class="toolbar mb-2 row">
                            <div class="col-auto">
                                <input type="file" id="fileInput" style="display: none;">
                                <div class="col-auto">
                                    <button class="btn btn-primary " onclick="document.getElementById('fileInput').click();"><i class="bi bi-upload"></i> 上传文件</button>
                                </div>
                            </div>
                            <div class="col-auto">
                                <button id="toggleButton" class="btn btn-primary" onclick="toggleFunction()">关闭联网</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="input-group">
                            <input type="text" id="userInput" class="form-control" style="font-size: 1.2em; padding: 0.5em;" placeholder="输入你的问题..." />
                            <button class="btn btn-primary" id="sendButton" onclick="sendMessage()">发送</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 sidebar">
            <div class="file-list">
                <h3>文件列表</h3>
                <!-- 文件列表内容 -->
                <ul class="list-group">
                    <li class="list-group-item">文件1.txt</li>
                    <li class="list-group-item">文档2.docx</li>
                    <li class="list-group-item">报告3.pdf</li>
                </ul>
            </div>
            <div class="knowledge-base-list">
                <h3>知识库列表</h3>
                <!-- 知识库列表内容 -->
                <ul class="list-group">
                    <li class="list-group-item">知识库条目1</li>
                    <li class="list-group-item">知识库条目2</li>
                    <li class="list-group-item">知识库条目3</li>
                </ul>
            </div>
        </div>
    </div>
</div>


<script>

  // 获取 chat-messages 容器
  const chatContainer = $('.chat-messages');

  // 定义自动滚动函数
  function autoScroll() {
    chatContainer.scrollTop = chatContainer.scrollHeight;
  }

  // 在页面加载完成后滚动到底部
  $(window).on('load', autoScroll);

  // 假设每次添加新消息时触发 'new-message' 事件
  $(document).on('new-message', autoScroll);
    const chatMessages = $('#chatMessages');
    const userInput = $('#userInput');

    function sendMessage() {
        const sendButton = document.getElementById('sendButton');
        const userInput = document.getElementById('userInput');
        const text = userInput.value.trim();
        if (text === '') return;

        // 禁用输入框和按钮并显示 loading 特效
        userInput.disabled = true;
        sendButton.disabled = true;
        sendButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 发送中...';

        // 添加用户消息
        addMessage(text, 'user');

        // 清空输入框
        userInput.value = '';

        // 模拟 AI 回复（可替换为调用真实 API）
        setTimeout(() => {
            const aiReply = simulateAIResponse(text);
            addMessage(aiReply, 'ai');

            // 恢复输入框和按钮状态
            userInput.disabled = false;
            sendButton.disabled = false;
            sendButton.innerHTML = '发送';
        }, 500);
    }

    function addMessage(text, sender) {
        const messageDiv = document.createElement('div');
        messageDiv.classList.add('message');

        let avatarHtml = '';
        if (sender === 'user') {
            messageDiv.classList.add('user-message');
            avatarHtml = '<img src="./static/images/user_input.png" class="avatar" alt="用户头像">';
            messageDiv.innerHTML = `${avatarHtml}<span class="bubble user-bubble">${text}</span>`;
        } else {
            messageDiv.classList.add('ai-message');
            avatarHtml = '<img src="./static/images/robot_input.png" class="avatar" alt="AI 头像">';
            messageDiv.innerHTML = `${avatarHtml}<span class="bubble ai-bubble">${text}</span>`;
        }

        chatMessages.push(messageDiv);
        chatMessages[0].scrollTop = chatMessages[0].scrollHeight; // 自动滚动到底部
    }

    // 模拟 AI 回复函数（替换为你自己的 AI 接口）
    function simulateAIResponse(input) {
        return `这是对 "${input}" 的模拟回复。你可以在这里接入真实的 AI API 来获取回答。`;
    }

</script>
<script>
    function toggleFunction() {
        const button = document.getElementById('toggleButton');
        if (button.classList.contains('btn-primary')) {
            button.classList.remove('btn-primary');
            button.classList.add('btn-danger');
            button.textContent = '已开启联网';
        } else {
            button.classList.remove('btn-danger');
            button.classList.add('btn-primary');
            button.textContent = '关闭联网';
        }
    }
</script>
</body>
</html>
